.i-case .list .mask h3, .i-case .list .mask p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.i-case .content-box {
  position: relative;
}

.i-case .list .box {
  display: block;
  position: relative;
  overflow: hidden;
  transition: clip-path 1.1s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.1s ease 167ms, -webkit-clip-path 1.1s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
          clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  opacity: 0;
}
.i-case .list .box img{
  display: block;
}
.i-case .list .box:hover .mask {
  opacity: 1;
  filter: alpha(opacity=100);
  bottom: 0;
}
.i-case .list .box.active {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  opacity: 1;
}
.i-case .list .mask {
  position: absolute;
  left: 0;
  right: 0;
  height: 102px;
  padding: 0px 6% 0;
  bottom: -102px;
  background: url(../x_shadow1.png) no-repeat center;
  -webkit-transition: opacity 0.6s,bottom 0.6s;
  transition: opacity 0.6s,bottom 0.6s;
  opacity: 0;
  filter: alpha(opacity=0);
}
.i-case .list .mask h3 {
  font-size: 20px;
  color: #ffffff;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 6px;
  width: 100%;
}
.i-case .list .mask p {
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  width: 100%;
}